<template>
  <div class="edit-group">
    <el-row>
      <el-col :span="24">
        <div class="right">
          <el-button type="danger" @click="goBack">取消</el-button>
          <el-button
            type="primary"
            @click="save">
            保存
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="col" :span="24">
        <span>群组名称：</span>
        <el-input
          class="w300px"
          v-model="groupName"
          placeholder="请输入群组名称"
          clearable>
        </el-input>
      </el-col>
      <el-col class="col" :span="24">
        <span>群组类别：</span>
        <el-select class="w300px" v-model="groupType" placeholder="请选择">
          <el-option label="动态群组" value="1"></el-option>
          <el-option label="静态群组" value="2"></el-option>
        </el-select>
      </el-col>
      <el-col class="col" :span="24">
        <span>群组成员：</span>
        <el-button type="text" @click="lookUpMembers">共 {{memberNum}} 个成员(点击查看/编辑成员)</el-button>
        <el-button
          v-show="groupType === '1'"
          type="text"
          @click="dialog2Visible = true">
          编辑条件
        </el-button>
      </el-col>
      <el-col class="col" :span="24">
        <p>创建时间：{{dateFormat(createTime)}}</p>
      </el-col>
      <el-col class="col" :span="24">
        <p>最后修改时间：{{dateFormat(updateTime)}}</p>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
      <el-row>
        <el-col class="col" :span="24">
          <el-radio v-model="radio" label="1" style="width: 125px;">新建群组：</el-radio>
          <el-input
            class="w300px"
            v-model="groupName"
            placeholder="请输入群组名称"
            clearable>
          </el-input>
        </el-col>
        <el-col :span="24" v-if="groupType === '2'">
          <el-radio v-model="radio" label="2" style="width: 125px;">加入已有群组：</el-radio>
          <el-select v-model="staticGroupId" filterable placeholder="请选择">
            <el-option
              v-for="item in groups"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col" :span="24">
          <div class="right" style="padding-top: 50px;">
            <el-button type="danger" @click="dialogVisible = false">取消</el-button>
            <el-button
              type="primary"
              :disabled="saveLoading"
              :loading="saveLoading"
              @click="confirmSave">
              保存
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      title="编辑条件"
      width="70%"
      :visible.sync="dialog2Visible"
      @close="dialog2Close">
      <v-filter
        ref="filter"
        collapseOnText="编辑条件"
        clearBtnText="取消"
        searchBtnText="确定"
        :collapsable="false"
        :multiGroups="false"
        @clear="filterClear"
        @search="filterSearch">
      </v-filter>
    </el-dialog>
  </div>
</template>

<script>
  import VFilter from './filter'
  export default {
    components: {
      VFilter
    },
    data() {
      return {
        saveLoading: false,
        groups: [],
        groupName: '',
        groupType: '',
        staticGroupId: '',
        memberNum: 0,
        createTime: new Date(),
        updateTime: new Date(),
        dialogVisible: false,
        dialog2Visible: false,
        radio: '1',
      }
    },
    computed: {
      dialogTitle() {
        return this.groupType === '1' ? '保存为动态群组' : '保存为静态群组'
      }
    },
    methods: {
      goBack() {
        this.$router.push({name: 'GmGroupsList'})
      },

      save() {
        this.dialogVisible = true
      },

      confirmSave() {
        this.saveLoading = true
      },

      lookUpMembers() {
        this.$router.push({
          name: 'GmGroupMembers',
          params: {
            id: this.$route.params.id
          }
        })
      },

      filterClear() {
        this.dialog2Visible = false
      },

      filterSearch(conditions) {
        console.log(conditions)
      },

      dialog2Close() {
        this.$refs.filter.clear()
      },

      // 日期格式化
      dateFormat(date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
    }
  }
</script>

<style lang="scss" scoped>

  .right {
    float: right;
  }

  .w300px {
    width: 300px;
  }

  .col {
    margin-bottom: 30px;
  }

</style>
